<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="js/angular.min.js"></script>
  <script src="js/csv.min.js"></script>
 
  <style>
    .odd {
      background-color: #3ff;
    }
    .even {
      background-color: red;
    }
    .red{
   color:red;
   border-color:red;
    }
    .div{   /*div内input垂直居中*/
    	height:40px;
    	border:1px solid ;
    	width:300px;
    	vertical-align: middle;
    	
    	display: table-cell;
    }
.input{ /*input 样式设置为只有一条线*/
border-style: none;
border-bottom-style: solid;
border-bottom-width:thin;
border-bottom-color:black;
}
  </style>
</head>
<body ng-controller="PeopleController">
<!--
	作者：779744514@qq.com
	时间：2015-08-20
	描述：javascript 中数组从0下标开始，所以使用！even和！odd将even（偶数）和odd（奇数）反转ng-class="{even: !$even, odd: !$odd}"
-->
<div class="div">
	<input class="input">
</div>
  <ul >
    <li ng-repeat="(key,value) in people"  >
    	<label  id="{{$index}}"style="display: none;">{{$index}}</label>
      <input   name="value.name"  ng-blur="change(key,value,$index,$event)" />{{value.name}} lives in {{value.city}}
    </li>
  </ul>
<code>{{ equation }}</code>

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>
<div>
  <input type="text"  ng-blur="change2($event)"  ng-model="number" required="required" numbers-only="numbers-only" placeholder="只能输入数字"/>
  	</div>
  <script>
    angular.module('myApp', [])
    .controller('PeopleController', function($scope) {
      $scope.people = [
        {name: "Ari", city: "San Francisco"},
        {name: "Erik", city: "Seattle"}
      ];
  /*      var da = [
                {name: "801", data: 0, qu: 630},
                {name: "680", data: 0, qu: 630},
                {name: "680", data: null, qu: 632},
                {name: "680", data: null, qu: 635},
                {name: "803", data: 0, qu: 630},
                {name: "801", data: 0, qu: 631},
                {name: "680", data: 0, qu: 631},
                {name: "803", data: 0, qu: 631},
                {name: "803", data: null, qu: 635}, 
                {name: "803", data: null, qu: 632},
                {name: "801", data: 0, qu: 632},
                {name: "801", data: 0, qu: 635}
                ];
         var result= new CSV(da, { header: true }).encode();  //将数据转化为csv格式
         console.log(result);
         */
      $scope.change=function(key,value,index,event){
      	var item=$scope.people[index];
     // $event.target.className='red'; 获取$event为blur的input，并为其设置class
      document.getElementById(key).style.display="inline"; //此处key值和index一样
      event.target.className='red';//取到元素
    // document.getElementById("1").focus(); 
      	console.log(index); //取到序号
      	console.log(item);//repeat的项
      	console.log(value.name);//项的值
      };
      $scope.change2=function(event){
      	console.log($scope.number);
      }
   
})
    .directive('numbersOnly', function(){   //只允许输入数字
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
       modelCtrl.$parsers.push(function (inputValue) {
           // this next if is necessary for when using ng-required on your input. 
           // In such cases, when a letter is typed first, this parser will be called
           // again, and the 2nd time, the value will be undefined
           if (inputValue == undefined) return '' 
           var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
           if (transformedInput!=inputValue) {
              modelCtrl.$setViewValue(transformedInput);
              modelCtrl.$render();
           }         

           return transformedInput;         
       });
     }
   };
})
  .directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.focusMe, function(value) {
        if(value === true) { 
          console.log('value=',value);
          //$timeout(function() {
            element[0].focus();
            scope[attrs.focusMe] = false;
          //});
        }
      });
    }
  };
});
  </script>

</body>
</html>